<template>
  <!-- tablecommon -->
  <div class="commonBoxmp white-bg">
    <TableV2
      @getHeight="getHeight"
      :columns="state.columnData"
      @getCurrentColumns="getCurrentColumns"
      @handleSeach="handleSeach"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <div>
            <el-button size="small" @click="handleChange" type="primary"
              >导出</el-button
            >
          </div>
        </div>
      </template>
      <template #tableContent>
        <div class="flex1">
          <el-table
            class="cP"
            :height="state.height"
            :data="state.tableData"
            @current-change="handleCurrentChangeRow"
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column
              v-for="(item, index) in state.columnData"
              class="animate__animated animate__fadeInUp"
              :key="index"
              :label="item.label"
              :prop="item.prop"
            >
            </el-table-column>
          </el-table>
        </div>
      </template>
    </TableV2>
  </div>
</template>

<script setup lang="ts">
import { forIn } from "@antv/x6/lib/util/object/object";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Xlsx from "xlsx";
import Column from "/@ts/components/table/Column";
const router = useRouter();
const route = useRoute();

//
onMounted(() => {});

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const count = ref(0);
const state: any = reactive({
  columnData: [
    {
      label: "名字",
      prop: "name",
      show: true,
    },
    {
      label: "年龄",
      prop: "age",
      show: true,
    },
    {
      label: "地址",
      prop: "address",
      show: true,
    },
  ],
  tableData: [
    {
      name: "张三",
      age: 21,
      address: "上海",
    },
    {
      name: "李四",
      age: 22,
      address: "上海",
    },
  ],
  page: {
    currentPage: 1,
    total: 0,
    pageSize: 10,
    pageSizes: [10, 15, 20],
  },
  height: 0,
});
const getHeight = (height: number) => {
  state.height = height;
};
const handleCurrentChange = (num: number) => {
  state.tableData = [];
};
//读区文件
const handleChange = () => {
  let data = [];
  for (let index = 0; index < state.tableData.length; index++) {
    const element = state.tableData[index];
    data.push({
      名字: element.name,
      年龄: element.age,
      地址: element.address,
    });
  }
  let ws = Xlsx.utils.json_to_sheet(data);
  let wb = Xlsx.utils.book_new();
  Xlsx.utils.book_append_sheet(wb, ws);
  Xlsx.writeFile(wb, "客户信息.xlsx");
};
const handleSizeChange = (size: number) => {};
const getCurrentColumns = (data: Column[]) => {
  // console.log("data :>> ", data);
  state.columnData = data;
};
</script>

<style scoped lang="scss"></style>
